<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市订单管理系统</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css"/>
    <link type="text/css" rel="stylesheet" href="../css/public.css"/>
    <style>
        body {
            background-color: white;
        }
    </style>
</head>
<body>
<div class="location">
    <strong>你现在所在的位置是:</strong>
    <span>用户管理页面 &gt;&gt; 用户修改页面</span>
</div>
<div class="providerAdd">
    <form id="userForm" name="userForm" method="post" >
    <input id="imgName" name="imgName" type="hidden"/>
    <div style="margin-top: 0;margin-bottom: 0">
        <label for="userCode">用户头像：</label>
        <div style="display: inline-block;margin-top: 0;margin-bottom: 0">
            <input type="file" name="headImg" id="headImg" onchange="upload_headImg()"/>
            <img src="../images/default.png" id="show_img" style="height: 40px"/> <br/>
        </div>
    </div>
    <div>
        <label for="userCode">用户编码：</label>
        <input required type="text" name="userCode" class="text" id="userCode" onblur="checkUserCode()"/>
        <font color="red">*</font>
        <span id="checkUserCode"></span>
    </div>
    <div>
        <label for="userName">用户名称：</label>
        <input required type="text" name="userName" id="userName"/>
        <font color="red">*</font>
    </div>
    <div>
        <label for="userPassword">用户密码：</label>
        <input required type="text" name="userPassword" id="userPassword"/>
        <font color="red">*</font>
    </div>
    <div>
        <label for="phone">手机号码：</label>
        <input required type="text" name="phone" id="phone"/>
        <font color="red">*</font>
    </div>
    <div>
        <label for="address">地址：</label>
        <input required type="text" name="address" id="address"/>
        <font color="red">*</font>
    </div>
    <div>
        <label for="birthday">生日：</label>
        <input required type="date" name="birthday" id="birthday"/>
        <font color="red">*</font>
    </div>
    <div>
        <label>角色：</label>
        <select name="userRole" id="userRole">
            <option value="0">请选择</option>
            <option value="1">系统管理员</option>
            <option value="2">普通员工</option>
        </select>
        <font color="red">*</font>
        <span id="checkRole"></span>
    </div>
    <div>
        <label>性别：</label>
        <input type="radio" name="gender" value="1" checked="checked"/>男
        <input type="radio" name="gender" value="2"/>女
        <font color="red">*</font>
    </div>
    <div class="providerAddBtn">
        <input type="submit" name="add" id="add" value="保存"/>
        <input type="button" id="back" name="back" value="返回" onclick="history.go(-1);"/>
    </div>
    </form>
</div>

<script src="../js/jquery-3.5.1.js"></script>
<script src="../js/jquery.form.js"></script>
<script>
    /**
     * 渲染角色列表-添加用户页面
     */
    var option_template = $("#userRole option:first");
    lodaData_roleList();

    function lodaData_roleList() {
        $.ajax({
            url: "../role/getRoleList",
            dataType: "json",
            success: function (result) {
                if (result.flag) {
                    //渲染角色列表
                    renderData_roleList(result.data);
                    //用户数据回显
                    loadData_user();
                } else {
                    alert(result.msg);
                }
            },
            error: function (jqxhr) {
                alert("请求出错:" + jqxhr.status);
            }
        });
    }

    //渲染角色列表
    function renderData_roleList(roleList) {
        //移除option
        $("#userRole option:gt(0)").remove();
        for (var i = 0; i < roleList.length; i++) {
            var option = option_template.clone();
            option.text(roleList[i].roleName);
            option.attr("value", roleList[i].id);

            $("#userRole").append(option);
        }
    }

    /**
     * 数据回显,根据用户id
     */
    function loadData_user() {
        var id = sessionStorage.id;
        $.ajax({
            url: "../user/getUserById/" + id,
            dataType: "json",
            success: function (result) {
                if (result.flag) {
                    renderData_user(result.data);
                } else {
                    alert(result.msg);
                }
            },
            error: function (jqxhr) {
                alert("请求出错:" + jqxhr.status);
            }
        });
    }
    //回显数据
    function renderData_user(user) {
        if (user.imgName !=null && user.imgName !=""){
            $("#show_img").attr("src","../upload/"+user.imgName);
        }
        $("#userCode").val(user.userCode);
        $("#userName").val(user.userName);
        $("#userPassword").val(user.userPassword);
        $("#phone").val(user.phone);
        $("#address").val(user.address);
        $("#birthday").val(user.birthday);
        $("#userRole").val(user.userRole);
        if (user.gender == 1) {
            $("[name='gender']:first").attr("checked", "checked");
        } else {
            $("[name='gender']:eq(1)").attr("checked", "checked");
        }
    }
    /**
     * 用户编码校验
     */
        //表单提交
    var flag=false;
    function checkUserCode(){
        var userCode=$("#userCode").val();
        $.ajax({
            url:"../user/getCountByUserCodeAndId/"+userCode+"/"+sessionStorage.id,
            dataType: "json",
            success:function (result){
                if (result.flag){
                    if (result.data>0){
                        $("#checkUserCode").text("用户已存在").css("color","red");
                    }else {
                        flag=true;
                        $("#checkUserCode").text("用户可使用").css("color","green");
                    }
                }else {
                    alert(result.msg);
                }
            },
            error:function (jqxhr){
                alert("请求出错:"+jqxhr.status);
            }
        });
    }
    /**
     * 表单提交事件,使用return false阻止表单的提交
     */
    $("#userForm").submit(function (){
        checkUserCode();
        if (!flag){
            //阻止表单的提交
            return false;
        }
        //校验角色
        var role=$("#userRole").val();
        if (role==0){
            $("#checkRole").text("请选择角色").css("color","red");
            return false;
        }else {
            $("#checkRole").empty();
        }

        //以ajax提交整个表单的数据
        $("#userForm").ajaxSubmit({
            url:"../user/updateUser?id="+sessionStorage.id,
            dataType:"json",
            success:function (result){
                if (result.flag){
                    alert("修改成功");
                    location.href="user_list.html";
                }else {
                    alert(result.msg);
                }
            },
            error:function (jqxhr){
                alert("请求出错:"+jqxhr.status);
            }
        });
        //停止表单自身的提交功能
        return false;
    });

    /**
     * 上传用户头像
     */
    function upload_headImg(){
        //获取文件,先转js,再转文件
        var file=$("#headImg")[0].files[0];
        //添加表单数据
        var formData=new FormData();
        formData.append("headImg",file);
        //发送ajax请求
        $.ajax({
            url:"../user/uploadHeadImg",
            data:formData,
            type:"post",
            dataType:"json",//接收数据类型
            processData:false,//默认为true,会将参数转为查询字符串
            contentType:false,//默认为true,无法提交文件,false可以使用multipart/form-data提交文件
            success:function (result){
                if (result.flag){
                    $("#show_img").attr("src","../upload/"+result.data)
                        .attr("height","40px");
                    //将图片名添加到表单汇总
                    $("#imgName").val(result.data);
                    console.log($("#imgName").val());
                }else {
                    alert(result.msg);
                }
            },
            error:function (jqxhr){
                alert("请求出错:"+jqxhr.status);
            }
        })
    }
</script>

</body>
</html>
